import React, {useEffect, useRef, useState} from 'react';
import {Button, Select, Space} from 'antd';
import './container.component.css';
import {ProvinceType} from "../model/province.type";
import {CityType} from "../model/city.type";
import {DistrictType} from "../model/district.type";
import {QueryService} from "../service/query.service";
import {MapBase} from "../map/map-base";
import {MapWrap} from "../map/map-wrap";
import {Feature} from "ol";
import {Point} from "../map/point";
import {MapDraw} from "../map/map-draw";

const ContainerComponent: React.FC = () => {

    const mapEleRef = useRef<HTMLDivElement>(null);
    const mapBase = useRef<MapBase>();

    const [provinceLoading, setProvinceLoading] = useState<boolean>(false);
    const [provinceList, setProvinceList] = useState<Array<ProvinceType>>([]);
    const [provinceValue, setProvinceValue] = useState<string>('100000');

    const [cityLoading, setCityLoading] = useState<boolean>(false);
    const [cityList, setCityList] = useState<Array<CityType>>([]);
    const [cityValue, setCityValue] = useState<string | null>(null);

    const [districtLoading, setDistrictLoading] = useState<boolean>(false);
    const [districtList, setDistrictList] = useState<Array<DistrictType>>([]);
    const [districtValue, setDistrictValue] = useState<string | null>(null);

    const [areaLoading, setAreaLoading] = useState<boolean>(false);

    const getProvinceList = (): void => {
        // 重置
        setProvinceList([]);
        setProvinceValue('100000');
        setCityList([]);
        setCityValue(null);
        setDistrictList([]);
        setDistrictValue(null);
        // 查询
        setProvinceLoading(true);
        QueryService.getAllProvinces().then((res) => {
            setProvinceLoading(false);
            setProvinceList(res.data);
        });
    }

    const getCityList = (adcode: string): void => {
        // 重置
        setCityList([]);
        setCityValue(null);
        setDistrictList([]);
        setDistrictValue(null);
        // 查询
        setCityLoading(true);
        QueryService.getCitiesByProvinceAdcode({adcode: adcode}).then((res) => {
            setCityLoading(false);
            setCityList(res.data);
        });
    }

    const getDistrictList = (adcode: string): void => {
        // 重置
        setDistrictList([]);
        setDistrictValue(null);
        // 查询
        setDistrictLoading(true);
        QueryService.getDistrictsByCityAdcode({adcode: adcode}).then((res) => {
            setDistrictLoading(false);
            setDistrictList(res.data);
        });
    }

    const showAreaOnMap = (): void => {
        let adcode = districtValue || cityValue || provinceValue;
        setAreaLoading(true);
        setTimeout(() => {
            QueryService.getAreaByAdcode({adcode: adcode}).then((res) => {
                setAreaLoading(false);
                draw(res.data.polyline);
            });
        }, 500);
    }

    const draw = (polyline: string): void => {
        if (mapBase.current == null) {
            return;
        }
        MapWrap.removeAllFeatures(mapBase.current, mapBase.current.drawLayerName);
        let features: Array<Feature> = [];
        let blocks = polyline.split('|');
        blocks.forEach((block) => {
            let points = block.split(';');
            let polygon: Array<Point> = [];
            points.forEach((point) => {
                let p = point.split(',');
                polygon.push(new Point(Number(p[0]), Number(p[1])));
            });
            let feature = MapDraw.createPolygonFeature(polygon);
            features.push(feature);
            mapBase.current && MapWrap.addFeature(mapBase.current, mapBase.current.drawLayerName, feature);
        });
        MapWrap.setFitViewByFeatures({
            map: mapBase.current,
            features: features,
            padding: [32, 32, 32, 32]
        });
    }

    useEffect(() => {
        if (mapEleRef.current != null && mapBase.current == null) {
            mapBase.current = new MapBase(mapEleRef.current);
        }
        getProvinceList();
    }, []);

    return (
        <>
            <Space wrap className={"selector"}>
                <Select
                    className={"each"}
                    loading={provinceLoading}
                    onChange={(e) => {
                        setProvinceValue(e);
                        getCityList(e);
                    }}
                    defaultValue={provinceValue}
                    options={provinceList.map((province) => ({label: province.name, value: province.adcode}))}
                />
                <Select
                    className={"each"}
                    loading={cityLoading}
                    onChange={(e) => {
                        setCityValue(e);
                        getDistrictList(e);
                    }}
                    defaultValue={cityValue}
                    options={cityList.map((city) => ({label: city.name, value: city.adcode}))}
                />
                <Select
                    className={"each"}
                    loading={districtLoading}
                    onChange={(e) => {
                        setDistrictValue(e);
                    }}
                    defaultValue={districtValue}
                    options={districtList.map((district) => ({label: district.name, value: district.adcode}))}
                />
                <Button type="primary" loading={areaLoading} onClick={() => showAreaOnMap()}>查看</Button>
            </Space>
            <div className={"map"} ref={mapEleRef}></div>
        </>
    );

}

export default ContainerComponent;
